/**
 * 绘制多边形覆盖物
 * @param {object} map Amap instance
 * @param {array} path 多边形坐标点
 * @param {object} config 配置信息 https://lbs.amap.com/api/javascript-api/reference/overlay#PolygonOptions
 * @returns polygon 实例
 */
export function drawPolygon(map, path, config = {}) {
  if (!(map instanceof AMap.Map)) {
    console.warn('地图实例错误，请传入正确的地图实例!')
    return
  }
  if (!Array.isArray(path)) {
    console.warn('path 必须是数组，请检查传入的数据。')
    return
  }
  // 默认配置
  let defaultConfig = {
    strokeColor: '#ffc0aa',
    strokeWeight: 2,
    strokeOpacity: 0,
    fillOpacity: 0,
    fillColor: '#ffc000',
    zIndex: 50,
    cursor:'pointer',
    bubble: false
  }
  // 合并的配置
  let merged = Object.assign(defaultConfig, config)
  // 绘制覆盖物
  let polygon = new AMap.Polygon({
    path,
    ...merged
  })
  polygon.on('mouseover', function(event) {
    event.target.setOptions({
      strokeOpacity: 0.4,
      fillOpacity: 0.1
    })
  })
  polygon.on('mouseout', function(event) {
    event.target.setOptions({
      strokeOpacity: 0,
      fillOpacity: 0
    })
  })
  map.add(polygon)
  return polygon
}

export function drawAreas(map, areas) {
  return areas.map(area => {
    let config = {
      extData: {
        ...area
      }
    }
    return drawPolygon(map, area.path, config)
  })
}
export function drawLines(map,config){
    let defaultConfig = {
        isOutline: true,
        outlineColor: '#84B4D5',
        borderWeight: .5,
        // strokeColor: "#6EABD0", 
        strokeColor: "#5dffff", 
        strokeOpacity: 0,
        strokeWeight: 3,
        // 线样式还支持 'dashed'
        strokeStyle: "solid",
        // strokeStyle是dashed时有效
        strokeDasharray: [0,0,0],
        lineJoin: 'round',
        lineCap: 'butt',
        geodesic:true,
        cursor:'pointer',
        zIndex: 50,
    }
    let merged = Object.assign(defaultConfig, config)
    var bezierCurve = new AMap.Polyline({
        path: config.path,
        ...merged
    })
    map.add(bezierCurve);
    let point = new AMap.LngLat(config.path[0][0],config.path[0][1])
    openInfoWindow(map,point)
    return bezierCurve
}
export function openInfoWindow(map,point){
        var content = [];
        // 实现自定义窗体内容，返回拼接后的字符串
        function createInfoWindow (title, content){
        var info = document.createElement("div");
        info.className = "custom-info";
        var top = document.createElement("div");
        var titleD = document.createElement("div");
        var contentD = document.createElement("div");
        var contentRow = document.createElement("div");
        top.className = "info-top";
        titleD.className = "info-title";
        contentD.className = "info-content";
        contentRow.className = "info-row";
        titleD.innerHTML = "事件信息"
        contentRow.innerHTML = "类型：人员聚集"
        contentD.append(contentRow.cloneNode(true))
        contentRow.innerHTML = "详情：路口人员密集"
        contentD.append(contentRow.cloneNode(true))
        contentRow.innerHTML = "位置：城市火车站地下通道"
        contentD.append(contentRow.cloneNode(true))
        contentRow.innerHTML = "坐标：114,123"
        contentD.append(contentRow.cloneNode(true))
        info.appendChild(top);
        top.appendChild(titleD);
        top.appendChild(contentD);
        // 定义中部内容
        // 定义底部内容
        var bottom = document.createElement("div");
        // var shape = document.createElement("img");
        // shape.src=require('./img/window_line.png')
        // bottom.appendChild(shape)
        bottom.className = "info-bottom";
        info.appendChild(bottom);
        return info;
    }
    function closeInfoWindow() {
        map.clearInfoWindow();
    }
    var infoWindow = new AMap.InfoWindow({
        isCustom: true,  //使用自定义窗体
        content: createInfoWindow('测试',content.join("<br>")),  //传入 dom 对象，或者 html 字符串
        anchor:'bottom-left',
        offset: new AMap.Pixel(0, 0)
     });
     infoWindow.open(map, point);
}

export function toThousands(num) {
  var num = (num || 0).toString(),
    result = ''
  while (num.length > 3) {
    result = ',' + num.slice(-3) + result
    num = num.slice(0, num.length - 3)
  }
  if (num) {
    result = num + result
  }
  return result
}


export function linesInit(map,loca,geo){
    var layer = new Loca.PulseLineLayer({
        // loca,
        zIndex: 10,
        opacity: 1,
        visible: true,
        zooms: [2, 22],
    });
    var headColors = ['#EFBB51', '#7F3CFF', '#4CC19B', '#0B5D74', '#E06AC4', '#223F9B', '#F15C1A', '#7A0FA6'];
    layer.setSource(geo);
    layer.setStyle({
        altitude: 0,
        lineWidth: 3,
        // 脉冲头颜色
        headColor: (_, feature) => {
            return headColors[feature.properties.type - 1];
        },
        // 脉冲尾颜色
        trailColor: 'rgba(128, 128, 128, 0.3)',
        // 脉冲长度，0.25 表示一段脉冲占整条路的 1/4
        interval: 0.5,
        lineWidth:3,
        // 脉冲线的速度，几秒钟跑完整段路
        duration: 2000,
    });
    loca.add(layer);
    loca.animate.start();
}
